<template>
  <div class="hello">
  	<button type="button" @click="handle1()">{{number1}}</button>
  	<button type="button" @click="handle2()">{{number2}}</button>
    <HelloGrid></HelloGrid>
  </div>
</template>

<script>
	import HelloGrid from "./HelloGrid"
	import { mapState } from 'vuex'
	import { mapMutations } from 'vuex'
	export default {
	  name: 'hello',
		 components:{
		 		HelloGrid
		 },
		computed:mapState([
			'number1',
			'number2'
		]),
		methods:{
			...mapMutations([
					'handle1',
					'handle2'
			])
			
		}
		 
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.hello{
		button{
			width: 50px;
			height:50px;
		}
	}
</style>
